<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="./fonts//demo.css"> -->
  <link rel="stylesheet" href="/admin/fonts/iconfont.css">
  <link rel="stylesheet" href="/admin/lib/layui/css/layui.css" />
  <style>
    .space_slide {
      margin: 10px 20px 30px 20px;
    }
  </style>
</head>

<body>

  <div class="layui-card space_slide">
    <div class="layui-card-header">
      <span class="layui-breadcrumb">
        <a href="https://5aebf8b605931.t73.qifeiye.com/">首页</a>
        <a href="/admin/goods/list"><cite>行业动态</cite></a>
        <a href="/admin/goods/list"><cite>新闻资讯</cite></a>
        <a><cite>文章修改</cite></a>
      </span>
    </div>
    <div class="layui-card-body">
      <form class="layui-form" action="">
        <div class="layui-form-item">
          <label class="layui-form-label">项目名称</label>
          <div class="layui-input-block">
            <input type="hidden" name="article_id" value="<%= data.article_id %>" class="layui-input">

            <input type="text" name="article_name" value="<%= data.article_name %>" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">文章分类</label>
          <div class="layui-input-block">
            <select name="ac_id" lay-verify="required">
              <% articleClass.forEach(item => { %>
              <% if (item.ac_id==data.ac_id) { %>
              <option selected value="<%= item.ac_id %>"><%= item.ac_name %> </option>
              <% } else { %>
              <option selected value="<%= item.ac_id %>"><%= item.ac_name %> </option>

              <% } %>
              <% }) %>
            </select>
          </div>
        </div>


        <div class="layui-form-item">
          <label class="layui-form-label">项目标题</label>
          <div class="layui-input-block">
            <input type="text" name="article_title" value="<%= data.article_title %>" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">产品图片</label>
          <div class="layui-input-block">
            <button type="button" class="layui-btn" id="pi_img_upload">
              <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
            <img src="<%= data.article_pic  %> " alt="" width="200px">
            <input type="hidden" name="new_pi_img" id="new_pi_img_upload_input" value="<%= data.article_pic  %>">
            <input type="hidden" name="old_pi_img" id="old_pi_img_upload_input" value="<%= data.article_pic  %>">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label"></label>
          <div class="layui-input-block">
            <blockquote class="layui-elem-quote">预览图:
              <div>

                <img src="" class="pi_img" width="200" alt="">
              </div>
            </blockquote>
          </div>
        </div>




        <!-- 是否删除 -->
        <div class="layui-form-item">
          <label class="layui-form-label">是否删除</label>
          <div class="layui-input-block">
            <!-- 1删除 0未删除 -->

            <% if (data.is_show==1) { %>
            <input type="checkbox" name="is_show" lay-skin="switch" lay-text="已展示|已隐藏" value="1" checked>

            <!-- 说明已经被删除了 -->
            <% } else { %>
            <input type="checkbox" name="is_show" lay-skin="switch" value="1" lay-text="已展示|已隐藏">
            <% } %>
          </div>
        </div>


        <div class="layui-form-item">
          <label class="layui-form-label">项目描述</label>
          <div class="layui-input-block">
            <textarea id="richText" name="article_content" style="display: none;"
              disabled><%= data.article_content %> </textarea>
          </div>
        </div>



        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="projectForm">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
</body>

</html>
<script src="/admin/lib/layui/layui.js"></script>
<script>
  window.onload = function () {
    layui.use(['upload', 'element', 'util', 'layer', 'form', 'jquery', 'upload', 'layedit'], function () {
      var {
        util,
        layer,
        element,
        upload,
        form,
        $,
        layedit
      } = layui
      //执行实例
      var pi_thumb_img_list = []
      var uploadInst_thumb
      // 产品图片的上传
      upload.render({
          elem: '#pi_img_upload',
          url: '/admin/goods/upload',
          done: function (res) {
            if (res.code == 1) {
              $('#new_pi_img_upload_input').val(res.url)
              $('.pi_img').attr('src', res.url)
            } else {
              layer.msg('图片上传失败')
            }
          }
        }),
      

        // 产品应用场景图片上传
        uploadInst_thumb = upload.render({
          elem: '#pi_thumb_upload',
          url: '/admin/goods/upload',
          // 允许多文件上传
          multiple: true,
          // 最大文件上传数5
          number: 5,
          // 规定打开文件选择框时，筛选出的文件类型，
          acceptMime: 'image/*',
          done: function (res) {
            // 多文件上传 但是是一个文件一个文件上传 然后返回
            // 所以使用遍历进行动态创建元素 
            if (res.code == 1) {
              $('<img>').attr('src', res.url).attr('width', '200px').css('marginLeft', '20px').appendTo($(
                '.imgList'))
              pi_thumb_img_list.push(res.url)
              $('#new_pi_thumb_img_input').val(pi_thumb_img_list.join(
                ','
              ))
            }
          }
        })

      // 富文本编辑器
      var layeditIns = layedit.build('richText', {
        height: 180, //设置编辑器高度
      });

      // 数据上传到服务器
      form.on('submit(projectForm)', (data) => {
        console.log(data.field);
        // BUG:如果富文本的字符太长 数据库就会存储不下  解决方案1.数据库更换数据类型lob  2.数据存储在文件中  数据库存文件的路径  3.将字段查分  存数据库多行
        // DONE:给data对象添加一个属性  也可以用这种方式去上传pi_content  这杨就不用表单上传了
        data.field.article_content = layedit.getContent(layeditIns)
        $.ajax({
          type: 'post',
          url: '/admin/news/industryindex/update',
          data: data.field,
          success: (res) => {

            // 成功的回调
            // 如果成功的话  我要有一个弹出 (都有)  
            if (res.code == 1) {
              layer.open({
                title: '项目添加信息',
                content: res.msg,
                icon: 1
              })
              // location.href = '/admin/goods/list'
              location.href = '/admin/news/industryindex/index'

            } else {
              layer.open({
                title: '项目添加信息',
                content: res.msg,
                icon: 2
              })

            }
          }
        })
        return false
      })

      //头部事件
      util.event('lay-header-event', {
        //左侧菜单事件
        menuLeft: function (othis) {
          layer.msg('展开左侧菜单的操作', {
            icon: 0
          });
        },
        menuRight: function () {
          layer.open({
            type: 1,
            content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
            area: ['260px', '100%'],
            offset: 'rt', //右上角
            anim: 5,
            shadeClose: true,
          });
        },
      });
    })
  }
</script>